<template>
  <div class="admin-layout">
    <!-- 侧边栏 -->
    <aside class="admin-sidebar" :class="{ 'collapsed': sidebarCollapsed }">
      <div class="sidebar-header">
        <div class="logo-container">
          <div class="logo-img" v-if="!sidebarCollapsed"></div>
          <span class="logo-text" v-if="!sidebarCollapsed">博客管理</span>
          <div class="logo-small" v-else></div>
        </div>
        <button @click="toggleSidebar" class="toggle-btn">
          <i :class="sidebarCollapsed ? 'fas fa-angle-right' : 'fas fa-angle-left'"></i>
        </button>
      </div>

      <div class="admin-user" v-if="!sidebarCollapsed">
        <div class="user-avatar">
          <div class="avatar-placeholder"></div>
        </div>
        <div class="user-info">
          <div class="user-name">{{ user?.username || '管理员' }}</div>
          <div class="user-role">管理员</div>
        </div>
      </div>
      
      <div class="admin-user-small" v-else>
        <div class="user-avatar-small">
          <div class="avatar-placeholder"></div>
        </div>
      </div>

      <nav class="sidebar-nav">
        <ul>
          <li>
            <router-link :to="{ name: 'admin-dashboard' }" :class="{ 'active': isActiveRoute('admin-dashboard') }">
              <i class="fas fa-tachometer-alt"></i>
              <span v-if="!sidebarCollapsed">仪表盘</span>
              <span v-else class="tooltip">仪表盘</span>
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'admin-articles' }" :class="{ 'active': isActiveRoute('admin-articles') || isActiveRoute('admin-articles-create') || isActiveRoute('admin-articles-edit') }">
              <i class="fas fa-file-alt"></i>
              <span v-if="!sidebarCollapsed">文章管理</span>
              <span v-else class="tooltip">文章管理</span>
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'admin-categories' }" :class="{ 'active': isActiveRoute('admin-categories') }">
              <i class="fas fa-folder"></i>
              <span v-if="!sidebarCollapsed">分类管理</span>
              <span v-else class="tooltip">分类管理</span>
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'admin-comments' }" :class="{ 'active': isActiveRoute('admin-comments') }">
              <i class="fas fa-comments"></i>
              <span v-if="!sidebarCollapsed">评论管理</span>
              <span v-else class="tooltip">评论管理</span>
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'admin-messages' }" :class="{ 'active': isActiveRoute('admin-messages') }">
              <i class="fas fa-envelope"></i>
              <span v-if="!sidebarCollapsed">联系消息</span>
              <span v-else class="tooltip">联系消息</span>
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'admin-media' }" :class="{ 'active': isActiveRoute('admin-media') }">
              <i class="fas fa-images"></i>
              <span v-if="!sidebarCollapsed">媒体管理</span>
              <span v-else class="tooltip">媒体管理</span>
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'admin-projects' }" :class="{ 'active': isActiveRoute('admin-projects') }">
              <i class="fas fa-project-diagram"></i>
              <span v-if="!sidebarCollapsed">项目管理</span>
              <span v-else class="tooltip">项目管理</span>
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'admin-settings' }" :class="{ 'active': isActiveRoute('admin-settings') }">
              <i class="fas fa-cogs"></i>
              <span v-if="!sidebarCollapsed">网站设置</span>
              <span v-else class="tooltip">网站设置</span>
            </router-link>
          </li>
          <li>
            <router-link :to="{ name: 'admin-account' }" :class="{ 'active': isActiveRoute('admin-account') }">
              <i class="fas fa-user-cog"></i>
              <span v-if="!sidebarCollapsed">账户设置</span>
              <span v-else class="tooltip">账户设置</span>
            </router-link>
          </li>
        </ul>
      </nav>

      <div class="sidebar-footer">
        <a href="#" @click.prevent="logout" class="logout-btn">
          <i class="fas fa-sign-out-alt"></i>
          <span v-if="!sidebarCollapsed">退出系统</span>
          <span v-else class="tooltip">退出系统</span>
        </a>
        <a href="/" target="_blank" class="view-site-btn">
          <i class="fas fa-external-link-alt"></i>
          <span v-if="!sidebarCollapsed">查看网站</span>
          <span v-else class="tooltip">查看网站</span>
        </a>
      </div>
    </aside>

    <!-- 在侧边栏外部添加一个折叠按钮，确保在折叠状态下也能点击 -->
    <button v-if="sidebarCollapsed" @click="toggleSidebar" class="expand-sidebar-btn">
      <i class="fas fa-angle-right"></i>
    </button>

    <!-- 主内容区 -->
    <div class="admin-main" :class="{ 'expanded': sidebarCollapsed }">
      <!-- 头部导航栏 -->
      <header class="admin-header">
        <div class="header-left">
          <button @click="toggleSidebar" class="menu-toggle d-md-none">
            <i class="fas fa-bars"></i>
          </button>
          
          <div class="breadcrumb">
            <span class="breadcrumb-item">{{ currentPageTitle }}</span>
          </div>
        </div>
        
        <div class="header-right">
          <div class="header-search">
            <input type="text" placeholder="搜索..." />
            <i class="fas fa-search"></i>
          </div>
          
          <div class="header-icons">
            <a href="#" class="header-icon" @click.prevent="showNotifications">
              <i class="fas fa-bell"></i>
              <span class="badge" v-if="notificationCount > 0">{{ notificationCount }}</span>
            </a>
          </div>
          
          <div class="user-dropdown">
            <button class="dropdown-toggle" @click="toggleUserDropdown">
              <div class="user-avatar">
                <div class="avatar-placeholder"></div>
              </div>
              <span class="user-name">{{ user?.username || '管理员' }}</span>
              <i class="fas fa-chevron-down"></i>
            </button>
            
            <div class="dropdown-menu" v-if="userDropdownOpen">
              <router-link :to="{ name: 'admin-account' }" class="dropdown-item">
                <i class="fas fa-user-circle"></i>
                <span>个人信息</span>
              </router-link>
              <router-link :to="{ name: 'admin-settings' }" class="dropdown-item">
                <i class="fas fa-cog"></i>
                <span>系统设置</span>
              </router-link>
              <div class="dropdown-divider"></div>
              <a href="#" @click.prevent="logout" class="dropdown-item">
                <i class="fas fa-sign-out-alt"></i>
                <span>退出登录</span>
              </a>
            </div>
          </div>
        </div>
      </header>
      
      <!-- 内容区域 -->
      <main class="admin-content">
        <div class="content-wrapper">
          <router-view />
        </div>
      </main>
      
      <!-- 页脚 -->
      <footer class="admin-footer">
        <p>© {{ new Date().getFullYear() }} 博客管理系统 | 版本 1.0.0</p>
      </footer>
    </div>
    
    <!-- 通知面板 -->
    <div class="notifications-panel" v-if="showNotificationsPanel">
      <div class="notifications-header">
        <h3>通知</h3>
        <button @click="showNotificationsPanel = false">
          <i class="fas fa-times"></i>
        </button>
      </div>
      <div class="notifications-body">
        <div v-if="notifications.length === 0" class="no-notifications">
          <i class="fas fa-bell-slash"></i>
          <p>暂无通知</p>
        </div>
        <div v-else class="notification-list">
          <div v-for="(notification, index) in notifications" :key="index" class="notification-item">
            <div class="notification-icon">
              <i :class="notification.icon"></i>
            </div>
            <div class="notification-content">
              <div class="notification-title">{{ notification.title }}</div>
              <div class="notification-text">{{ notification.text }}</div>
              <div class="notification-time">{{ notification.time }}</div>
            </div>
            <button class="notification-mark-read" @click="markAsRead(index)">
              <i class="fas fa-check"></i>
            </button>
          </div>
        </div>
      </div>
      <div class="notifications-footer">
        <button @click="markAllAsRead" class="mark-all-read">
          全部标记为已读
        </button>
      </div>
    </div>
    
    <!-- 背景遮罩 -->
    <div class="backdrop" v-if="showNotificationsPanel || userDropdownOpen" @click="closeAllPopups"></div>
  </div>
</template>

<script>
import { computed, onMounted, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { authService } from '../../services';

export default {
  setup() {
    const router = useRouter();
    const route = useRoute();
    const user = ref(null);
    const sidebarCollapsed = ref(false);
    const userDropdownOpen = ref(false);
    const showNotificationsPanel = ref(false);
    const notificationCount = ref(3);
    const notifications = ref([
      {
        title: '新评论',
        text: '您的文章"Vue3新特性解析"收到了一条新评论',
        time: '5分钟前',
        icon: 'fas fa-comment'
      },
      {
        title: '新消息',
        text: '您收到了一条来自张三的联系消息',
        time: '1小时前',
        icon: 'fas fa-envelope'
      },
      {
        title: '系统通知',
        text: '网站备份已完成',
        time: '昨天',
        icon: 'fas fa-info-circle'
      }
    ]);
    
    // 获取当前页面标题
    const currentPageTitle = computed(() => {
      return route.meta.title || '管理后台';
    });
    
    // 检查当前路由是否激活
    const isActiveRoute = (routeName) => {
      return route.name === routeName;
    };
    
    // 切换侧边栏
    const toggleSidebar = () => {
      sidebarCollapsed.value = !sidebarCollapsed.value;
      // 保存到本地存储
      localStorage.setItem('admin_sidebar_collapsed', sidebarCollapsed.value);
    };
    
    // 获取当前用户信息
    onMounted(async () => {
      try {
        // 从本地存储读取侧边栏状态
        const savedState = localStorage.getItem('admin_sidebar_collapsed');
        if (savedState !== null) {
          sidebarCollapsed.value = savedState === 'true';
        }
        
        user.value = authService.getCurrentUser();
        
        // 如果本地缓存没有用户信息，尝试从API获取
        if (!user.value) {
          const response = await authService.getProfile();
          user.value = response.user;
        }
      } catch (error) {
        console.error('获取用户信息失败:', error);
        // 出错时返回登录页
        authService.logout();
        router.push({ name: 'admin-login' });
      }
    });
    
    // 退出登录
    const logout = () => {
      authService.logout();
      router.push({ name: 'admin-login' });
    };
    
    const toggleUserDropdown = () => {
      userDropdownOpen.value = !userDropdownOpen.value;
      if (userDropdownOpen.value) {
        showNotificationsPanel.value = false;
      }
    };
    
    const showNotifications = () => {
      showNotificationsPanel.value = !showNotificationsPanel.value;
      if (showNotificationsPanel.value) {
        userDropdownOpen.value = false;
      }
    };
    
    const closeAllPopups = () => {
      userDropdownOpen.value = false;
      showNotificationsPanel.value = false;
    };
    
    const markAsRead = (index) => {
      notifications.value.splice(index, 1);
      notificationCount.value = Math.max(0, notificationCount.value - 1);
    };
    
    const markAllAsRead = () => {
      notifications.value = [];
      notificationCount.value = 0;
    };
    
    return {
      user,
      currentPageTitle,
      sidebarCollapsed,
      isActiveRoute,
      toggleSidebar,
      logout,
      userDropdownOpen,
      showNotificationsPanel,
      notificationCount,
      notifications,
      toggleUserDropdown,
      showNotifications,
      closeAllPopups,
      markAsRead,
      markAllAsRead
    };
  }
}
</script>

<style scoped>
/* 全局变量 - 与Home.vue保持一致 */
:root {
  --primary-color: #4361ee;
  --secondary-color: #3a0ca3;
  --light-color: #f8f9fa;
  --dark-text: #2d3748;
  --light-text: #f8f9fa;
  --danger-color: #e63946;
  --success-color: #2a9d8f;
  --warning-color: #ff9914;
  --info-color: #4cc9f0;
}

/* 整体布局 */
.admin-layout {
  display: flex;
  width: 100%;
  min-height: 100vh;
  background-color: #f5f7fb;
}

/* 侧边栏样式 */
.admin-sidebar {
  width: 260px;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #4361ee, #3a0ca3);
  color: white;
  box-shadow: 3px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: all 0.3s ease;
  overflow-y: auto;
}

.admin-sidebar.collapsed {
  width: 70px;
  overflow-y: visible; /* 当折叠时不显示滚动条 */
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-img, .logo-small {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: var(--primary-color);
}

.logo-text {
  font-size: 18px;
  font-weight: 600;
  color: white;
}

.toggle-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  z-index: 1010; /* 确保按钮在滚动条之上 */
}

.toggle-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

/* 调整折叠状态下的按钮位置和样式 */
.admin-sidebar.collapsed .toggle-btn {
  position: absolute;
  right: -12px;
  top: 20px;
  width: 24px;
  height: 24px;
  background-color: var(--primary-color);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.admin-user {
  display: flex;
  align-items: center;
  padding: 20px;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.user-avatar, .user-avatar-small {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-avatar-small {
  width: 40px;
  height: 40px;
  margin: 15px auto;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-weight: 600;
  font-size: 16px;
  color: white;
}

.user-role {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.admin-user-small {
  display: flex;
  justify-content: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 侧边栏导航菜单 */
.sidebar-nav {
  flex-grow: 1;
  padding: 15px 0;
}

.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav li {
  margin-bottom: 5px;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: all 0.3s;
  position: relative;
  border-left: 3px solid transparent;
}

.sidebar-nav a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

.sidebar-nav a.active {
  background-color: rgba(255, 255, 255, 0.15);
  color: white;
  border-left-color: #f5c542;
}

.sidebar-nav a i {
  font-size: 18px;
  width: 24px;
  margin-right: 15px;
  text-align: center;
}

.sidebar-nav a .tooltip {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(15px, -50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 12px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  width: max-content;
  z-index: 10;
}

.sidebar-nav a .tooltip::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid rgba(0, 0, 0, 0.8);
}

.sidebar-nav a:hover .tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(5px, -50%);
}

/* 侧边栏底部区域 */
.sidebar-footer {
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.logout-btn, .view-site-btn {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  text-decoration: none;
  transition: all 0.3s;
}

.logout-btn:hover, .view-site-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.logout-btn i, .view-site-btn i {
  margin-right: 10px;
  width: 20px;
  text-align: center;
}

/* 主内容区样式 */
.admin-main {
  flex-grow: 1;
  margin-left: 260px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.admin-main.expanded {
  margin-left: 70px;
}

/* 头部导航栏样式 */
.admin-header {
  background-color: white;
  height: 70px;
  padding: 0 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 990;
}

.header-left {
  display: flex;
  align-items: center;
}

.menu-toggle {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  background-color: var(--primary-color);
  border: none;
  color: white;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: 15px;
}

.breadcrumb {
  display: flex;
  align-items: center;
}

.breadcrumb-item {
  font-size: 20px;
  font-weight: 600;
  color: var(--dark-text);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-search {
  position: relative;
  width: 250px;
}

.header-search input {
  width: 100%;
  padding: 10px 15px 10px 40px;
  border-radius: 30px;
  border: 1px solid #e0e0e0;
  background-color: #f5f7fb;
  transition: all 0.3s;
}

.header-search input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
}

.header-search i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #aaa;
}

.header-icons {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header-icon {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  background-color: #f5f7fb;
  text-decoration: none;
  transition: all 0.3s;
}

.header-icon:hover {
  background-color: #e0e0e0;
}

.badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--danger-color);
  color: white;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}

.user-dropdown {
  position: relative;
}

.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 5px;
  transition: all 0.3s;
}

.dropdown-toggle:hover {
  background-color: #f5f7fb;
}

.dropdown-toggle .user-avatar {
  width: 35px;
  height: 35px;
}

.dropdown-toggle .user-name {
  color: var(--dark-text);
  font-size: 14px;
  font-weight: 500;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  width: 200px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
  z-index: 1000;
  margin-top: 10px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  color: var(--dark-text);
  text-decoration: none;
  transition: all 0.3s;
}

.dropdown-item:hover {
  background-color: #f5f7fb;
}

.dropdown-item i {
  width: 20px;
  text-align: center;
  color: #666;
}

.dropdown-divider {
  height: 1px;
  background-color: #eee;
  margin: 8px 0;
}

/* 内容区域样式 */
.admin-content {
  flex-grow: 1;
  padding: 20px;
  background-color: #f5f7fb;
}

.content-wrapper {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  min-height: calc(100vh - 160px);
  padding: 25px;
  animation: fadeIn 0.5s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 页脚样式 */
.admin-footer {
  padding: 15px 20px;
  text-align: center;
  color: #666;
  border-top: 1px solid #eee;
  background-color: white;
}

/* 通知面板样式 */
.notifications-panel {
  position: fixed;
  top: 70px;
  right: 20px;
  width: 350px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  animation: slideIn 0.3s;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.notifications-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

.notifications-header h3 {
  margin: 0;
  font-size: 18px;
  color: var(--dark-text);
}

.notifications-header button {
  background: none;
  border: none;
  font-size: 18px;
  color: #aaa;
  cursor: pointer;
  padding: 5px;
}

.notifications-body {
  max-height: 400px;
  overflow-y: auto;
}

.no-notifications {
  padding: 30px;
  text-align: center;
  color: #aaa;
}

.no-notifications i {
  font-size: 40px;
  margin-bottom: 10px;
}

.notification-list {
  padding: 10px 0;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s;
}

.notification-item:hover {
  background-color: #f5f7fb;
}

.notification-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(67, 97, 238, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  margin-right: 15px;
  flex-shrink: 0;
}

.notification-content {
  flex-grow: 1;
}

.notification-title {
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--dark-text);
}

.notification-text {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.notification-time {
  font-size: 12px;
  color: #aaa;
}

.notification-mark-read {
  background: none;
  border: none;
  color: var(--success-color);
  cursor: pointer;
  padding: 5px;
  opacity: 0;
  transition: all 0.3s;
}

.notification-item:hover .notification-mark-read {
  opacity: 1;
}

.notifications-footer {
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  border-top: 1px solid #eee;
}

.mark-all-read {
  background: none;
  border: none;
  color: var(--primary-color);
  cursor: pointer;
  padding: 8px 15px;
  font-weight: 500;
  transition: all 0.3s;
  border-radius: 4px;
}

.mark-all-read:hover {
  background-color: rgba(67, 97, 238, 0.1);
}

/* 背景遮罩层 */
.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 999;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .admin-sidebar {
    transform: translateX(-100%);
    box-shadow: none;
  }
  
  .admin-sidebar.active {
    transform: translateX(0);
    box-shadow: 3px 0 10px rgba(0, 0, 0, 0.1);
  }
  
  .admin-main {
    margin-left: 0;
  }
  
  .admin-main.expanded {
    margin-left: 0;
  }
  
  .menu-toggle {
    display: flex;
  }
  
  .header-search {
    display: none;
  }
  
  .content-wrapper {
    padding: 15px;
  }
  
  .notifications-panel {
    width: calc(100% - 40px);
    max-width: none;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .admin-sidebar.collapsed {
    transform: translateX(-100%);
  }
  
  .admin-main.expanded {
    margin-left: 0;
  }
  
  .header-search {
    width: 180px;
  }
}

/* 侧边栏外部的展开按钮样式 */
.expand-sidebar-btn {
  position: fixed;
  left: 70px; /* 与折叠后的侧边栏宽度相同 */
  top: 20px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--primary-color);
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1020; /* 确保在最上层 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.expand-sidebar-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}
</style> 